<template>
  <div class="trip">
    <!-- header -->
    <my-header></my-header>
    <!-- 毕业旅行第一张图 -->
    <div class="box">
      <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/title.jpg" />
    </div>
    <!-- 滑动表单 -->
    <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/once.png" />
    <div class="card-list">
      <!-- 免费咨询模块 -->
      <div class="card-item">
        <div class="step">
          <h3>STEP 1</h3>
          <p class="p1">大声说出心仪目的地</p>
          <p class="p2">留下联系方式，旅行顾问将尽快与你联系。</p>
        </div>
        <div class="row">
          <van-form @submit="onSubmit">
            <van-field v-model="custom.destination" name="destination" placeholder="目的地" />
            <van-field v-model="custom.phone" name="phone" placeholder="手机号" />
            <van-field v-model="custom.demand" name="demand" placeholder="备注" />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit">提交需求</van-button>
            </div>
          </van-form>
        </div>
      </div>
      <!-- 定制路线 -->
      <div class="card-item">
        <div class="step">
          <h3>STEP 2</h3>
          <p class="p1">定制超特别的线路</p>
          <span>根据你的喜好和要求定制旅行方案，满意后支付费用。</span>
        </div>
        <div class="row">
          <div class="-image">
            <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/step2.jpg" />
            <div class="jump">
              <router-link to="/">了解定制旅行</router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 路书 -->
      <div class="card-item">
        <div class="step">
          <h3>STEP 3</h3>
          <p class="p1">用专属路书纪念青春</p>
          <span>完成各种预定，制作属于你们的「毕业旅行版」路书 。</span>
        </div>
        <div class="row">
          <div class="-image">
            <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/step3.jpg" />
            <div class="jump">
              <router-link to="/">查看路书样本</router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 下载APP -->
      <div class="card-item">
        <div class="step">
          <h3>GO !</h3>
          <p class="p1">开始你的毕业旅行</p>
          <span>收拾好行囊，和小伙伴们一起上路吧</span>
        </div>
        <div class="row">
          <div class="-image">
            <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/step4.jpg" />
            <div class="jump">
              <router-link to="/">下载游缘景行APP</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 好玩又不贵 -->
    <div class="list_content">
      <div class="-image">
        <div>
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/price.png" />
        </div>
        <!-- 商品 -->
        <div class="list_img" v-for="(item, i) of trade" :key="i">
          <router-link :to="`/tourMdetails/${item.gid}`">
            <van-image fit="contain" :src="item.main_img" />
            <div class="list_describe">
              <h3>{{ item.title }}</h3>
            </div>
            <div class="average">
              <div class="element">
                <span class="price">¥</span>
                <span class="price">{{ item.price }}</span>
                <span class="word">/人起</span>
              </div>
              <div></div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 文艺小清新 -->
    <div class="section">
      <div class="-image">
        <div>
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/Refresh.png" />
        </div>
        <!-- 推荐商品 -->
        <div class="list_img" v-for="(item, i) of fresh" :key="i">
          <router-link :to="`/tourMdetails/${item.gid}`">
            <van-image fit="contain" :src="item.main_img" />
            <div class="list_describe">
              <h3>{{ item.title }}</h3>
            </div>
            <div class="average">
              <div class="element">
                <span class="price">¥</span>
                <span class="price">{{ item.price }}</span>
                <span class="word">/人起</span>
              </div>
              <div></div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 有梦在远方 -->
    <div class="section1">
      <div class="-image">
        <div>
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/dream.png" />
        </div>
        <!-- 推荐商品 -->
        <div class="list_img" v-for="(item, i) of distance" :key="i">
          <router-link :to="`/tourMdetails/${item.gid}`">
            <van-image fit="contain" :src="item.main_img" />
            <div class="list_describe">
              <h3>{{ item.title }}</h3>
            </div>
            <div class="average">
              <div class="element">
                <span class="price">¥</span>
                <span class="price">{{ item.price }}</span>
                <span class="word">/人起</span>
              </div>
              <div></div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 滑动表单 -->
    <div class="destination">
      <p class="section_title">更多毕业旅行 <span class="special">推荐目的地</span></p>
      <p class="section_title_describe">
        你只需要决定出发，剩下的一切交给游缘景行就好
      </p>
    </div>
    <!-- 推荐目的地 -->
    <div class="card-list">
      <!-- 法意瑞 -->
      <div class="card-item">
        <div class="chart">
          <van-image @click="france" fit="contain" src="https://www.uniqueway.com/assets/img/welcome/theme/graduation/mobile/France.jpg" />
          <div class="chart-0">
            <p class="typeface">France · Italy · Swiss</p>
          </div>
          <div class="chart-1">
            <p>法意瑞</p>
          </div>
        </div>
      </div>
      <!-- 意大利 -->
      <div class="card-item">
        <div class="chart">
          <van-image @click="italys" fit="contain" src="https://www.uniqueway.com/assets/img/welcome/theme/graduation/mobile/Newzealand.jpg" />
          <div class="chart-2">
            <p class="typeface">Italys</p>
          </div>
          <div class="chart-1">
            <p>意大利</p>
          </div>
        </div>
      </div>
      <!-- 澳大利亚 -->
      <div class="card-item">
        <div class="chart">
          <van-image @click="australia" fit="contain" src="https://www.uniqueway.com/assets/img/welcome/theme/graduation/mobile/Australia.jpg" />
          <div class="chart-3">
            <p class="typeface">Australia</p>
          </div>
          <div class="chart-1">
            <p>澳大利亚</p>
          </div>
        </div>
      </div>
      <!-- 迪拜 -->
      <div class="card-item">
        <div class="chart">
          <van-image @click="dubai" fit="contain" src="https://www.uniqueway.com/assets/img/welcome/theme/graduation/mobile/Dubai.jpg" />
          <div class="chart-3">
            <p class="typeface">Dubai</p>
          </div>
          <div class="chart-4">
            <p>迪拜</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 毕业旅行分享 -->
    <div class="travel">
      <!-- 滑动表单 -->
      <div class="destination">
        <p class="section_title">他们的 <span class="special">毕业旅行</span></p>
      </div>
      <div class="card-list">
        <!-- 他们的毕业旅行分享 -->
        <div class="card-item">
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/story1.jpg" />
          <div class="articletext">
            <p class="texttop">“</p>
            <p class="textbottom">”</p>
            <div class="textword">
              <span class="box-1">
                一路去过好多人少风景好的地方，拍遍了<br />冰川、湖泊和星空，还有不少我们六人的<br />合影，不枉我背着相机从中国到新西兰！
              </span>
            </div>
          </div>
        </div>
        <div class="card-item">
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/story2.jpg" />
          <div class="articletext">
            <p class="texttop">“</p>
            <p class="textbottom">”</p>
            <div class="textword">
              <span class="box-1">
                冰川徒步实在是太棒了！虽然途中挺不容<br />易的，走了不到两个小时就开始累了，但<br />还好有大家一起，一路上也挺开心的。 我<br />们先是坐了直升机，送到冰川上后，又看<br />到了蓝色的冰洞，还敲下冰块尝了一下味<br />道，特别有意思。
              </span>
            </div>
          </div>
        </div>
        <div class="card-item">
          <van-image fit="contain" src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/story3.jpg" />
          <div class="articletext">
            <p class="texttop">“</p>
            <p class="textbottom">”</p>
            <div class="textword">
              <span class="box-1">
                这次新西兰之行太多难忘的回忆了，体验<br />了跳伞，近距离看到了小企鹅卖萌，还去<br />了冰川探险.……几个人坐在湖边看风景，<br />喂鸭子，也很舒服自在。真希望大家以后还<br />可以一起出去旅行！
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="custom">
        <div class="custom_title">
          <p class="describe">新西兰11日·一起去冒险！中土世界六人行</p>
          <p class="route">
            基督城-格雷茅斯-法兰士约瑟夫冰川-瓦纳卡-皇后镇-但尼丁-提卡波湖
          </p>
          <p class="play">
            跳伞 | 直升机冰川徒步 | 野生动物之旅 | 天际缆车 | 好牧人教堂观星
          </p>
        </div>
      </div>
    </div>
    <!-- 必备攻略 -->
    <div class="raiders">
      <div class="raiders_container">
        <div class="list_title">
          <div class="words">
            <p>毕业旅行 <span>必备攻略</span></p>
          </div>
        </div>
        <van-list>
          <div class="" v-for="(item, i) in notes" :key="i">
            <router-link :to="`/articles/${item.tid}`" class="articleItem">
              <!-- 主图-->
              <div class="nox"><img class="articleImg" :src="item.cover_img" alt="" /></div>
              <div class="">
                <!-- 标题 -->
                <h3>{{ item.title }}</h3>
                <!-- 文章描述item.subtitle -->
                <p class="articleDes">{{ item.subtitle }}</p>
                <ul>
                  <!-- 游玩地点-->
                  <li>游玩地点：{{ item.destination }}</li>
                  <!-- 发表时间 item.create_time-->
                  <li>发表时间：{{ item.create_time }}</li>
                </ul>
              </div>
            </router-link>
          </div>
        </van-list>
      </div>
    </div>
    <!-- 底部图片 -->
    <div class="custom_trip_left">
      <van-image fit="contain" src="	https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/back.jpg" />
      <p class="trip_title">定制属于你的毕业旅行</p>
      <p class="trip_describe">
        用一次完美的毕业旅行，打造出独一无二的青春纪念册
      </p>
    </div>
    <!-- 页脚组件 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
// 引入订制旅行API
import { customOrder } from '../server/order';
// 引入商品列表API
import { getGoods } from '../server/goods.js';
//引入提前封装好的获取游记列表的方法
import { getNotes } from '../server/article.js';
export default {
  data() {
    return {
      token: localStorage.getItem('token'),
      custom: {
        destination: '', //提交目的地的文本框
        phone: '', //手机号
        demand: '', //备注
      },
      trade: [], //好玩不贵
      fresh: [], //小清新
      distance: [], //有梦在远方
      notes: [], //保存当前游记列表
      classify: '', // 保存分类
    };
  },
  mounted() {
    getGoods('国内').then((result) => {
      this.trade = result.slice(0, 2);
    });
    getGoods('日韩').then((result) => {
      this.fresh = result.slice(4, 6);
    });
    getGoods('欧美').then((result) => {
      this.distance = result.slice(0, 2);
    });
    getNotes(this.classify)
      .then((result) => {
        for (var i = 0; i < result.length; i++) {
          // 将数据库返回的时间处理为人看的时间
          result[i].create_time = this.moment(result[i].create_time).format('YYYY-MM-DD');
        }
        this.notes = result;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    onSubmit() {
      var desReg = /^[\u4e00-\u9fa5]{2,}$/;
      var phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

      if (!desReg.test(this.custom.destination)) {
        this.$toast.fail('请输入正确的目的地');
        return;
      }
      if (!phoneReg.test(this.custom.phone)) {
        this.$toast.fail('请输入正确的手机号');
        return;
      }
      if (this.custom.demand == '') {
        this.$toast.fail('备注不能为空');
        return;
      }
      // 如果用户未登录
      if (this.token == null) {
        this.$toast.fail('未登录,即将为您跳转登录页面');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      } else {
        // 否则,用户已登录
        customOrder(this.token, this.custom)
          .then(() => {
            this.$toast.success('提交成功,客服将在24小时内与您联系');
            this.custom.username = '';
            this.custom.userphone = '';
            this.custom.userremarks = '';
          })
          .catch(() => {
            this.$toast.fail('提交失败,请稍后重试');
          });
      }
    },
    france() {
      this.$router.push('/tourMdetails/93');
    },
    italys() {
      this.$router.push('/tourMdetails/91');
    },
    australia() {
      this.$router.push('/tourMdetails/89');
    },
    dubai() {
      this.$router.push('/tourMdetails/77');
    },
  },
};
</script>

<style lang="scss">
// ↓全局父元素DIV
.trip {
  background-color: #f4f4f4;
  width: 100%;
  overflow: hidden;
  // 滑动组件的↓
  .card-list {
    // height: 500px;
    white-space: nowrap;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .card-item {
      width: 300px;
      overflow: hidden;
      display: inline-block;
      background-color: #fff;
      margin: 5%;
      .step {
        height: 168px;
        padding: 24px;
        width: 100px;
        > h3 {
          font-size: 24px;
          font-weight: 600;
          line-height: 1;
          color: #47c0e9;
          margin-bottom: 12px;
        }
        .p1 {
          font-size: 24px;
          font-weight: 500;
          line-height: 1;
          color: #544641;
        }
        .p2 {
          font-size: 14px;
          line-height: 1.57;
          color: #918682;
        }
      }
      .row {
        margin: 0;
        height: 230px;
        text-align: center;
        padding: 0 24px;
        .van-button--round {
          background-color: #63c6c2;
          border: 1px solid #63c6c2;
        }
        .-image {
          transform: translateY(-50px);
          .jump {
            margin-top: 10%;
            background-color: #fff;
          }
        }
      }
    }
    .chart-0 {
      position: absolute;
      top: 8%;
      left: 22%;
    }
    .chart-1 {
      position: absolute;
      bottom: 10%;
      left: 35%;
      p {
        color: #fff;
        font-size: 24px;
      }
    }
    .chart-2 {
      position: absolute;
      top: 8%;
      left: 40%;
    }
    .chart-3 {
      position: absolute;
      top: 8%;
      left: 40%;
    }
    .chart-4 {
      position: absolute;
      bottom: 10%;
      left: 40%;
      p {
        font-size: 24px;
        color: #fff;
      }
    }
  }
  // 好玩又不贵↓
  .list_content {
    background-color: #47c0e9;
    padding: 50px 16px;
  }
  //↓文艺小清新的内边距
  .section {
    padding: 50px 16px;
  }
  //↓有梦在远方的内边距和背景色
  .section1 {
    padding: 50px 16px;
    background-color: #36e0c0;
  }
  //推荐商品里的文字css
  .list_img {
    background-color: #fff;
    margin-top: 20px;
    padding: 16px;
    .van-image {
      width: 100%;
    }
    .list_describe {
      h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        color: #544641;
        margin-bottom: 12px;
      }
      span {
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0;
        color: #918682;
        margin-bottom: 25px;
      }
    }
    .average {
      margin-bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 36px;
      .element {
        display: flex;
        align-items: flex-end;
      }
      .price {
        font-family: Avenir;
        font-size: 30px;
        line-height: 1;
        color: #ff728e;
        font-weight: 500;
      }
      .word {
        font-size: 20px;
        line-height: 1.17;
        color: #ff728e;
        display: block;
        white-space: nowrap;
      }
    }
  }
  //每个模块顶部的文字
  .destination {
    padding: 1rem 0 0.5rem 1rem;
    .section_title {
      font-size: 24px;
      color: #544641;
      margin-bottom: 0.25rem;
      display: block;
    }
    .special {
      font-weight: 500;
      color: #47c0e9;
    }
    .section_title_describe {
      font-size: 14px;
      color: #918682;
    }
  }
  // 推荐目的地的文字定位的父级div
  .chart {
    position: relative;
  }
  // 推荐目的地的文字定位
  .typeface {
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #fff;
  }
  //他们的毕业旅行的div
  .travel {
    background-color: #f9f9f9;
    .card-item {
      background-color: #47c0e9;
    }
    .textword {
      .box-1 {
        font-size: 14px;
        line-height: 1.71;
        letter-spacing: 0;
        text-align: justify;
        color: #fff;
        padding: 0 24px;
        display: block;
        box-sizing: border-box;
      }
    }
    .articletext {
      border-radius: 4px;
      position: relative;
      height: 214px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      .texttop {
        top: 5px;
        left: 24px;
        color: #fff;
        font-size: 40px;
        position: absolute;
        margin: 0 0 10px;
      }
      .textbottom {
        bottom: -20px;
        right: 24px;
        color: #fff;
        font-size: 40px;
        position: absolute;
        margin: 0 0 10px;
      }
    }
    .custom {
      padding: 0 16px;
      margin-top: 5px;
      background-color: #fff;
      padding-bottom: 10%;
      .custom_title {
        padding-bottom: 5%;
        padding-left: 8px;
        border-left: 4px solid #47c0e9;
        .describe {
          font-size: 16px;
          font-weight: 500;
          line-height: 1;
          text-align: justify;
          color: #47c0e9;
          margin-bottom: 8px;
        }
        .route {
          font-size: 12px;
          line-height: 1.5;
          text-align: justify;
          color: #918682;
          margin-bottom: 4px;
        }
        .play {
          font-size: 12px;
          line-height: 1.5;
          text-align: justify;
          color: #918682;
        }
      }
    }
  }
  //攻略的div模块顶部文字
  .raiders {
    padding: 40px 16px;
    background-color: #fff;
    margin-top: 5%;
    .list_title {
      text-align: center;
      margin-bottom: 40px;
      .words {
        font-size: 24px;
        color: #544641;
        & > p {
          font-size: 24px;
          color: #544641;
          margin-bottom: 0.25rem;
          display: block;
        }
        span {
          font-weight: 500;
          color: #47c0e9;
        }
      }
    }
    .articleItem {
      display: flex;
      padding: 16px 0;
      // margin: 0 16px;
      border-bottom: 1px solid #999;
      .nox {
        margin-right: 20px;
        margin-top: 20px;
      }
      h3 {
        color: #f55f31;
        font-size: 17px;
        font-weight: 600;
        font-size: 17px;
        line-height: 22px;
      }

      p {
        height: 60px;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        //控制段落隐藏显示
        overflow: hidden;
        //溢出的文字内容用省略号代替
        text-overflow: ellipsis;
        //文字间距
        letter-spacing: normal;
        color: black;
        margin: 5px 0;
      }

      ul {
        color: gray;
      }

      .articleImg {
        width: 150px;
        height: 125px;
        border-radius: 10px;
        margin-left: 5px;
      }
    }
  }

  //底部图片的外层div
  .custom_trip_left {
    position: relative;
    height: 480px;
    //以下两条是定位在图片中的两行文字
    .trip_title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0;
      text-align: center;
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 61px;
    }
    .trip_describe {
      font-size: 14px;
      line-height: 1;
      letter-spacing: 0;
      text-align: center;
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 35px;
    }
  }
}
</style>
